---
title: 最近のトランザクション
description: 最近の取引を表示する
---

# 最近のトランザクション

## 最近の取引を表示する

RainbowKitのアカウントモーダル内で最近の取引を表示することを選択できます。すべての取引はローカルストレージに保存され、表示するには手動でRainbowKitに登録する必要があります。

デフォルトの`ConnectButton`実装は、保留中の取引がある場合、ユーザーのアバターの周りに読み込みインジケータを表示します。カスタム`ConnectButton`実装は、あなたのレンダリング関数に渡される`account.hasPendingTransactions`プロパティを介してこの動作を再現できます。

この機能を使用するには、まず`RainbowKitProvider`で`showRecentTransactions`オプションを有効にしてください。

```tsx
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider showRecentTransactions={true} {...etc}>
      {/* ... */}
    </RainbowKitProvider>
  );
};
```

取引は`useAddRecentTransaction`フックを使用してRainbowKitに登録できます。

```tsx
import { useAddRecentTransaction } from '@rainbow-me/rainbowkit';

export default () => {
  const addRecentTransaction = useAddRecentTransaction();

  return (
    <button
      onClick={() => {
        addRecentTransaction({
          hash: '0x...',
          description: '...',
        });
      }}
    >
      Add recent transaction
    </button>
  );
};
```

取引がRainbowKitに登録されると、そのステータスは完了時に更新されます。

デフォルトでは、取引はその取引がマインされたブロックに別のブロックが追加された時点で完了と見なされますが、この動作はカスタム `confirmations` 値を指定することで構成できます。

```tsx
import { useAddRecentTransaction } from '@rainbow-me/rainbowkit';

export default () => {
  const addRecentTransaction = useAddRecentTransaction();

  return (
    <button
      onClick={() => {
        addRecentTransaction({
          hash: '0x...',
          description: '...',
          confirmations: 100,
        });
      }}
    >
      Add recent transaction
    </button>
  );
};
```
